<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hash</title>
</head>
<body>
  <button onclick="goto('/a')">去a</button>
  <button onclick="goto('/b')">去b</button>
  <div id="root"></div>

  <script>
    let root = document.getElementById('root');
    window.onpopstate = function(event){
      console.log(event);
      root.innerHTML = location.pathname
    }
    window.onpushstate = function(state,title,pathname){
      root.innerHTML = pathname;
    }
    !(function(){
      let oldPushState = history.pushState;//缓存官方的老的原版的方法
      history.pushState = function(state,title,pathname){
        if(typeof window.onpushstate === 'function'){
          window.onpushstate(state,title,pathname)
        }
        return oldPushState.apply(history,arguments);
      }
    })(history)
    function goto(pathname){
      history.pushState(null,null,pathname);
    }

 
  </script>
</body>
</html>